<template>
  <div class="Order">
    <x-header :left-options="{backText: '',preventGoBack:true}">我的订单</x-header>
    <scroller :on-infinite="infinite" style="top: -40px;" :on-refresh="refresh" ref="myscroller">
      <div style="padding:71px 6px 0 6px">
        <div class="Orderinfo" style="padding: 0 12px;margin-top: 12px;background: #fff"
             v-for="(item,index) in orderinfo" :key="index">
          <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
            <div style="flex:1;text-align: left">店铺名称</div>
            <div class="shopname">
              {{item.shopName}}
            </div>
          </div>
          <div style="border-bottom: 1px #F8FAF9 solid;padding:10px 4px">
            <div style="text-align: left">座位信息</div>
            <div style="padding: 8px 0;display: flex;flex-wrap:wrap">
              <div class="seat_info" v-for="_item in item.orderSeats">
                {{_item.name}}
              </div>
            </div>
          </div>
          <div style="display: flex;border-bottom: 1px #F8FAF9 solid;padding:10px 4px ">
            <div style="flex: 1;text-align: left" v-if="item.startTime==null">预约时间</div>
            <div style="flex: 1;text-align: left" v-else>开始时间</div>
            <div v-if="item.startTime==null"
                 style="flex: 1;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              {{item.orderTime.substring(0,16)}}
            </div>
            <div v-else style="flex: 1;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              {{item.startTime.substring(0,16)}}
            </div>
          </div>
          <div style="padding: 14px 0">
            <div v-if="item.status==0" class="buttom_ru" @click="starttime(item)"></div>
            <x-button v-if="item.status==1" type="primary" class="saveinfo" @click.native="saveinfo(item)">正在进行中...
            </x-button>
            <x-button v-if="item.status==2" type="primary" class="saveinfo" @click.native="notsaveinfo(item)">未确认订单
            </x-button>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import Vue from 'vue'
import {mapMutations} from 'vuex'
import {XHeader, XButton} from 'vux'
import wx from 'weixin-js-sdk'
import {DnotuseOrder, ScanEntry, wxAdmin, QueryOrder} from '../../api/mine'

export default {
  data () {
    return {
      orderinfo: [],
      pageNo: 0,
      pageSize: 0
    }
  },
  created () {
  },
  methods: {
    starttime (item) {
      let _this = this
      // _this.$router.push({
      //   name: 'OrderStart',
      //   query: {
      //     orderId: item.id,
      //     qrcode: 111,
      //     shopname: item.shopName,
      //     setlist: JSON.stringify(item.orderSeats)
      //   }
      // })
      // return
      wxAdmin({
        url: window.location.href.split('#')[0]
      }).then(res => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.data.signature, // 必填，签名，见附录1
          jsApiList: [
            'translateVoice',
            'chooseWXPay',
            'getLocation',
            'scanQRCode'
          ]
        })
        // 微信扫一扫功能
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
          success: function (re) {
            let result = re.resultStr // 当needResult 为 1 时，扫码返回的结果
            // let result = data.split(',')[1]//返回的结果是码的类型+‘,’+内容，所以要以数组分割取第二个。
            // alert(JSON.stringify(re))
            ScanEntry({
              orderId: item.id,
              qrcode: result
            }).then(r => {
              if (r.data.status == 'success') {
                _this.$router.push({
                  name: 'OrderStart',
                  query: {
                    orderId: item.id,
                    qrcode: result,
                    shopname: item.shopName,
                    setlist: JSON.stringify(item.orderSeats)
                  }
                })
                _this.isOrder({isOrdering: true})
              } else {
                Vue.$vux.confirm.show({
                  content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>${r.data.msg}</p>`,
                  showCancelButton: false,
                  onConfirm () {
                  }
                })
              }
            })
          }
        })
      })
    },
    infinite (done) {
      this.pageNo += 1
      this.pageSize += 10
      DnotuseOrder({
        'status': '0,1,2',
        'page-no': this.pageNo,
        'page-size': this.pageSize
      }).then(res => {
        this.orderinfo = this.orderinfo.concat(res.data.data.resultList)
        if (res.data.data.resultList.length < 10) {
          done(true)
        }
      })
    },
    refresh () {
      this.pageNo = 1
      this.pageSize = 10
      DnotuseOrder({
        'status': '0,1,2',
        'page-no': this.pageNo,
        'page-size': this.pageSize
      }).then(res => {
        this.orderinfo = res.data.data.resultList
        this.$refs.myscroller.finishPullToRefresh()
      })
    },
    saveinfo (item) { // 正在进行中的订单
      let _this = this
      QueryOrder({
        orderId: item.id
      }).then(res => {
        if (res.data.status === 'success') {
          _this.$router.replace({
            name: 'OrderStarting',
            query: {
              shopname: item.shopName,
              time: res.data.data.startTime,
              orderid: item.id,
              setlist: JSON.stringify(res.data.data.orderSeats)
            }
          })
        }
      })
    },
    notsaveinfo (item) { // 未确认订单
      let _this = this
      QueryOrder({
        orderId: item.id
      }).then(res => {
        if (res.data.status === 'success') {
          this.$router.replace({
            name: 'PayingBill',
            query: {
              shopname: item.shopName,
              time: res.data.data.startTime,
              orderid: item.id,
              setlist: JSON.stringify(res.data.data.orderSeats),
              paymoney: res.data.data.billAmount
            }
          })
        }
      })
    },
    ...mapMutations({
      isOrder: 'isOrdering'
    })
  },
  computed: {},
  components: {
    XHeader,
    XButton
  }
}
</script>

<style lang="less" type="text/less">
  .Order {
    .saveinfo {
      width: 260px;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
    color: @font-color;
    .vux-header {
      background: #fff;
      position: fixed;
      z-index: 10;
      width: 100%;
      top: 0;
      padding: 0;
      .vux-header-title {
        color: #000;
        font-size: 16px;
        font-weight: 600;
      }
      .vux-header-left {
        display: none;
      }
    }
    .Orderinfo {
      border-radius: 5px;
      font-size: 15px;
      .shopname {
        flex: 2;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: @common-color;
      }
      .seat_info {
        font-size: 12px;
        padding: 4px 14px;
        width: 60px;
        text-align: center;
        margin: 4px;
        border-radius: 3px;
        box-shadow: 0px -2px 0px 0px #FAFAFA,
        -2px 0px 0px 0px #FAFAFA,
        2px 0px 0px 0px #FAFAFA,
        0px 2px 0px 0px #FAFAFA;
      }
    }
    .buttom_ru {
      height: 48px;
      width: 260px;
      background-image: url('../../assets/order_btn@3x.png');
      background-repeat: no-repeat;
      background-size: 100% 48px;
      margin: 0 auto;
    }
  }

</style>
